<!DOCTYPE html>
<html>
  <head>
    <title>element练习</title>
    <link rel="stylesheet" href="../js/index.css">
    <style>
      .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
      }

      .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
      }

      .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
      }

      body > .el-container {
        margin-bottom: 40px;
      }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
        .el-row {
          margin-bottom: 20px;
        }
        .el-col {
          border-radius: 4px;
        }
        .bg-purple-dark {
          background: #99a9bf;
          margin: 1px;
        }
        .bg-purple {
          background: #d3dce6;
        }
        .bg-purple-light {
          background: #e5e9f2;
        }
        .grid-content {
          border-radius: 4px;
          min-height: 36px;
        }
        .row-bg {
          padding: 10px 0;
          background-color: #f9fafc;
        }
        body{
            margin:0;
        }
        body,html{
            height: 100%;
        }
        #app{
            height: 100%;
        }
</style>
  </head>
  <body>

    <div id="app">
       <el-container style="height: 100%">
  <el-aside width="200px"><el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
          <el-menu-item index="1-3">选项3</el-menu-item>
          <el-menu-item index="1-4">选项4</el-menu-item>
          <el-menu-item index="1-5">选项5</el-menu-item>
      </el-submenu>
    </el-menu></el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                main的第一行
            </div>
        </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" :offset="6">
                <div class="grid-content bg-purple-dark">
                <el-input v-model="input"  style="width: 250px" placeholder="请输入内容" show-password clearable></el-input>
            </div>
        </el-col>
            <el-col :span="24" :offset="12">
                <div class="grid-content bg-purple-dark">
               <div class="demo-input-suffix">
                  <el-input
                    placeholder="请选择日期"
                    suffix-icon="el-icon-date"
                    v-model="input1">
                  </el-input>
                  <el-input
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    v-model="input2">
                  </el-input>
                </div>
                <div class="demo-input-suffix">
                  <el-input
                    placeholder="请选择日期"
                    v-model="input3">
                    <i slot="suffix" class="el-input__icon el-icon-date"></i>
                  </el-input>
                  <el-input
                    placeholder="请输入内容"
                    v-model="input4">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                  </el-input>
                </div>
            </div>
        </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" :offset="6">
            <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              fixed
              prop="date"
              label="日期"
              width="150">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="120">
            </el-table-column>
            <el-table-column
              prop="province"
              label="省份"
              width="120">
            </el-table-column>
            <el-table-column
              prop="city"
              label="市区"
              width="120">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址"
              width="300">
            </el-table-column>
            <el-table-column
              prop="zip"
              label="邮编"
              width="120">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
                </el-col>
        </el-row>
    </el-main>
  </el-container>
</el-container>
    </div>

    <script src="../js/vue.js"></script>
    <script src="../js/index.js"></script>

    <script>
    const vm = new Vue({
      el: '#app',
        methods: {
            handleClick(row) {
                console.log(row);
            }
        },
        data() {
    return {
      input: '',
        input1: '',
      input2: '',
      input3: '',
      input4: '',
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }]
      }
    }
    })

    </script>
  </body>
</html>